<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3_react生命周期（新）</title>
</head>
<body>
<!--准备好一个 div-->
<div id="test"></div>
<!--引入 react核心库-->
<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
<!--引入 react-dom 用于支持 react 操作 DOM-->
<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
<!--引入 babel 用于将 jsx 转为 js-->
<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

<script type="text/babel">
  /**
   * 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
             1.	constructor()
             2.	getDerivedStateFromProps
             3.	render()
             4.	componentDidMount()    ====> 常用，一般这个钩子做些初始化的事情。例如：开启定时器、发送网络请求、订阅信息
   2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
             1.	getDerivedStateFromProps
             2.	shouldComponentUpdate()
             3.	render()
             4.	getSnapshotBeforeUpdate
             5.	componentDidUpdate()
   3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
             1.	componentWillUnmount() ====> 常用，一般在这个钩子做些收尾的事情，例如：关闭定时器、取消订阅信息
   */
  // 创建组件
  class Count extends React.Component{

    // 构造器
    constructor(props) {
      console.log('Count---constructor')
      super(props)
      // 初始化状态
      this.state = {count:0}
    }

    // 点我+1  按钮的回调
    add = ()=>{
      // 获取原状态
      const {count} = this.state
      // 更新状态
      this.setState({count:count+1})
    }

    // 卸载组件  按钮的回调
    death = ()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // 强制更新按钮的回调
    force = ()=>{
      this.forceUpdate()
    }

    // 若state的值任何时候都取决于props，你们可以使用getDerivedStateFromProps
    static getDerivedStateFromProps(props,state){
      console.log('Count---getDerivedStateFromProps',props,state)
      return null
    }

    // 在更新之前获得快照
    getSnapshotBeforeUpdate(){
      console.log('Count---getSnapshotBeforeUpdate')
      return 'bilibili'
    }

    // 组件挂载完毕的钩子
    componentDidMount(){
      console.log('Count---componentDidMount')
    }

    // 组件将要卸载的钩子
    componentWillUnmount(){
      console.log('Count---componentWillUnmount')
    }

    // 控制组件更新的钩子
    shouldComponentUpdate(){
      console.log('Count---shouldComponentUpdate')
      return true
    }

    // 组件更新完毕的钩子
    componentDidUpdate(preProps,preState,snapshotValue){
      console.log('Count---componentDidUpdate',preProps,preState,snapshotValue)
    }

    render(){
      console.log('Count---render')
      const {count} = this.state
      return(
          <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={this.add}>点我+1</button>
            <button onClick={this.death}>卸载组件</button>
            <button onClick={this.force}>不更改任何状态中的数据强制更新一下</button>
          </div>
      )
    }

  }

  // 渲染组件
  ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
</script>
</body>
</html>
